<template>
  <div>
    <index-chart>
    </index-chart>
<!--    有权限右侧按钮内容显示     &ndash;&gt;<a-button v-has="'web:sys:permission:modify'">v-has="'web:sys:permission:modify'"</a-button>
    <br>
    没有权限右侧按钮内容不显示 &ndash;&gt; <a-button v-has="'no:web:sys:permission:modify'">v-has="'no'"</a-button>-->
    <div class="content">
       <el-row :gutter="20">
      <el-col :span="12">
        <div class="main">
          <p class="info">本站信息:</p>
          <el-form :inline="true" :model="formInline" label-width="auto" class="demo-form-inline">
            <el-form-item label="名称">
              <el-input v-model="formInline.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="标识">
              <el-input v-model="formInline.identification" placeholder="标识"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="formInline.ip" placeholder="地址"></el-input>
            </el-form-item>
            <el-form-item label="网关">
              <el-input v-model="formInline.gateway" placeholder="网关"></el-input>
            </el-form-item>
            <el-form-item label="端口">
              <el-input v-model="formInline.port" placeholder="端口"></el-input>
            </el-form-item>
            <el-form-item label="版本">
              <el-input v-model="formInline.versions" placeholder="版本"></el-input>
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="formInline.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="formInline.password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item label="子网掩码">
              <el-input v-model="formInline.subnet" placeholder="子网掩码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" style="margin-left:70px;">编辑</el-button>
              <el-button type="primary" @click="onSubmit">升级</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
       <el-col :span="6">
        <div class="maintop">
          <p>用户</p>
          <div class="echart" id="mychart6"></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="maintop">
          <p>视频播放</p>
          <div class="echart" id="mychart7"></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="maintops">
          <p>设备</p>
          <div class="echart" id="mychart"></div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="maintops">
          <p>摄像机</p>
          <div class="echart" id="mychart2"></div>
        </div>
      </el-col>
    </el-row>
    </div>
    <div class="bottom">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <p>录像任务</p>
              <div class="echart" id="mychart3"></div>
          </div>
        </el-col>
         <el-col :span="8">
          <div class="grid-content bg-purple">
            <p>外域</p>
              <div class="echart" id="mychart4"></div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <p>服务</p>
             <div class="echart" id="mychart5"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import IndexChart from './IndexChart'
import * as echarts from "echarts";
import axios from "axios";
import { Homepages } from '@/api/api'
import { symlink } from 'fs';
  export default {
    name: "Analysis",
    components: {
      IndexChart,
    },
    data() {
      return {
      xData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标
      labelPosition: 'top',
      yData: [23, 24, 18, 25, 27, 28, 25], //数据
      taskDate: [10, 11, 9, 17, 14, 13, 14],
      taskDates: [15, 14, 10, 7, 4, 3, 18],
      myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
      chartPie: null,
        formInline: {
          name:'',
          identification:'',
          ip:'',
          gateway:'',
          port:'',
          versions:'',
          password:'',
          subnet:'',
          username:'',
        },
        subtext:'',
        // gross:'',
        opinion:['在线用户数', '离线用户数'],
        opinionData:[
              {value: 335, typename: '在线用户数'},
              {value: 310, typename: '离线用户数'},
        ],
        title:[],
        result:[]
      }
    },
    created() {
      this.initEchartssix();//用户数
      this.initEchartsseven();//视屏播放数
      this.initEchartsone();//设备数量
      this.initEchartstwo();//摄像机数量
      this.initEchartsthree();//录像任务数量
      this.initEchartsfour();//外域数量
      this.initEchartsfive();//服务
    },
    mounted(){
      this.onload();
      this.$nextTick(() => {
        this.initEchartssix();//用户数
      })
      
      this.initEchartsseven();//视屏播放数
      this.initEchartsone();//设备数量
      this.initEchartstwo();//摄像机数量
      this.initEchartsthree();//录像任务数量
      this.initEchartsfour();//外域数量
      this.initEchartsfive();//服务
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      onload() {
        Homepages('').then((res)=>{
          this.formInline = res.data.message;
          this.user = res.data.user;
          this.video = res.data.video;
          this.dev = res.data.dev;
          this.camera = res.data.camera;
          this.task = res.data.task;
          this.platform = res.data.platform;
          this.server = res.data.server;
          console.log(res.data);
          this.initEchartssix();
          this.initEchartsseven();
          this.initEchartsone();
          this.initEchartstwo();
          this.initEchartsthree();
          this.initEchartsfour();
          this.initEchartsfive();
        })
      },
      //用户数
      initEchartssix() {
        let arr =[];
        let arrs = [];
        this.user?.forEach((item) => {
          arrs.push(item.gross);
          arr.push({
            value:item.num,
            name:item.typename
          })
        })
        let arrpop = arrs.toString();
        let arrpops = arrpop.replaceAll(undefined,'');
        let arrpopt = arrpops.replaceAll(',','');
        console.log(arrpopt);
        let mytextStyle = {
          color: "#333",                          
          fontSize: 18,                            
        };
        let mylabel = {
          show: true,                 
          position: "right",          
          offset: [30, 40],             
          formatter: '{b} : {c} ({d}%)',      
          textStyle: mytextStyle
        };
      // 多列柱状图
      console.log(this.subtext,'=====');
      const mulColumnZZTData = {
       title: {
            // text: 'Pie Chart',
            // subtext: '纯属虚构',
            x: 'center',
            itemGap: 10,
            y: 'center',
            // text: '总数',
            subtext:arrpopt,
            // console.log(this.subtext),
              // 副标题样式
            subtextStyle: {
              color: '#666',
              fontSize:'30px',
            },
            // left: '40%',
            // top: '43%',
          },
          
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },

          legend: {
          data: arr,
            left:"center",                              
            top:"bottom",                              
            orient:"horizontal",                        
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['50%', '50%'],
              labelLine:{  
                normal:{  
                    length:0
                }  
            },  
              data: arr,
              animationEasing: 'cubicInOut',
              animationDuration: 2600,
              label: {           
                emphasis: mylabel
              }
            }
          ]
      };
      const myChart6 = echarts.init(document.getElementById("mychart6"));
      myChart6.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart6.resize();
      });
      },
      //视屏播放数
      initEchartsseven() {
        let arr =[];
        let arrs = [];
        this.video?.forEach((item) => {
          arrs.push(item.gross);
          arr.push({
            value:item.num,
            name:item.typename
          })
        })
        let arrpop = arrs.toString();
        let arrpops = arrpop.replaceAll(undefined,'');
        let arrpopt = arrpops.replaceAll(',','');
        console.log(arrpopt);
        let mytextStyle = {
          color: "#333",                          
          fontSize: 18,                            
        };
        let mylabel = {
          show: true,                 
          position: "right",          
          offset: [30, 40],             
          formatter: '{b} : {c} ({d}%)',      
          textStyle: mytextStyle
        };
      // 多列柱状图
      console.log(this.subtext);
      const mulColumnZZTData = {
       title: {
            // text: 'Pie Chart',
            // subtext: '纯属虚构',
            x: 'center',
            itemGap: 10,
            y: 'center',
            // text: '总数',
            subtext: arrpopt,
              // 副标题样式
            subtextStyle: {
              color: '#666',
              fontSize:'30px',
            },
            // left: '40%',
            // top: '43%',
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
          data: arr,
            left:"center",                              
            top:"bottom",          
            // center:'center',                    
            orient:"horizontal",                        
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['50%', '50%'],
              labelLine:{  
                normal:{  
                    length:0
                }  
            }, 
              data:arr,
              animationEasing: 'cubicInOut',
              animationDuration: 2600,
              label: {           
                emphasis: mylabel
              }
            }
          ]
      };
      const myChart7 = echarts.init(document.getElementById("mychart7"));
      myChart7.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart7.resize();
      });
      },
      //设备数量
      initEchartsone() {
         let arr =[];
         let arrs =[];
        this.dev?.forEach((item) => {
          arrs.push(item.gross);
          arr.push({
            value:item.num,
            name:item.typename
          })

        })
        let arrpop = arrs.toString();
        let arrpops = arrpop.replaceAll(undefined,'');
        let arrpopt = arrpops.replaceAll(',','');
        console.log(arrpopt);
        let mytextStyle = {
          color: "#333",                          
          fontSize: 18,                            
        };
        let mylabel = {
          show: true,                 
          position: "right",          
          offset: [30, 40],             
          formatter: '{b} : {c} ({d}%)',      
          textStyle: mytextStyle
        };
      // 多列柱状图
      const mulColumnZZTData = {
       title: {
            // text: 'Pie Chart',
            // subtext: '纯属虚构',
            x: 'center',
            itemGap: 10,
            y: 'center',
            // text: '总数',
            subtext: arrpopt,
              // 副标题样式
            subtextStyle: {
              color: '#666',
              fontSize:'30px',
            },
            // left: '40%',
            // top: '43%',
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            data: arr,
            left:"center",                              
            top:"bottom",                              
            orient:"horizontal",                        
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['50%', '50%'],
              labelLine:{  
                normal:{  
                    length:0
                }  
            }, 
              data:arr,
              animationEasing: 'cubicInOut',
              animationDuration: 2600,
              label: {           
                emphasis: mylabel
              }
            }
          ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      },
      //摄像机数量
      initEchartstwo() {
         let arr =[];
         let arrs =[];
        this.camera?.forEach((item) => {
          arrs.push(item.gross);
          arr.push({
            value:item.num,
            name:item.typename
          })

        })
        let arrpop = arrs.toString();
        let arrpops = arrpop.replaceAll(undefined,'');
        let arrpopt = arrpops.replaceAll(',','');
        console.log(arrpopt);
        let mytextStyle = {
          color: "#333",                          
          fontSize: 18,                            
        };
        let mylabel = {
          show: true,                 
          position: "right",          
          offset: [30, 40],             
          formatter: '{b} : {c} ({d}%)',      
          textStyle: mytextStyle
        };
      // 多列柱状图
      const mulColumnZZTData = {
       title: {
            // text: 'Pie Chart',
            // subtext: '纯属虚构',
            x: 'center',
            itemGap: 10,
            y: 'center',
            // text: '总数',
            subtext: arrpopt,
              // 副标题样式
            subtextStyle: {
              color: '#666',
              fontSize:'30px',
            },
            // left: '40%',
            // top: '43%',
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            data: arr,
            left:"center",                              
            top:"bottom",                              
            orient:"horizontal",                        
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['50%', '50%'],
              labelLine:{  
                normal:{  
                    length:0
                }  
            }, 
              data:arr,
              animationEasing: 'cubicInOut',
              animationDuration: 2600,
              label: {           
                emphasis: mylabel
              }
            }
          ]
      };
      const myChart2 = echarts.init(document.getElementById("mychart2"));
      myChart2.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart2.resize();
      });
      },
      //录像任务数量
      initEchartsthree() {
        let arr =[];
        let arrs =[];
        this.task?.forEach((item) => {
          arrs.push(item.gross);
          arr.push({
            value:item.num,
            name:item.typename
          })

        })
        let arrpop = arrs.toString();
        let arrpops = arrpop.replaceAll(undefined,'');
        let arrpopt = arrpops.replaceAll(',','');
        console.log(arrpopt);
        let mytextStyle = {
          color: "#333",                          
          fontSize: 18,                            
        };
        let mylabel = {
          show: true,                 
          position: "right",          
          offset: [30, 40],             
          formatter: '{b} : {c} ({d}%)',      
          textStyle: mytextStyle
        };
      // 多列柱状图
      const mulColumnZZTData = {
       title: {
            // text: 'Pie Chart',
            // subtext: '纯属虚构',
            x: 'center',
            itemGap: 10,
            y: 'center',
            // text: '总数',
            subtext: arrpopt,
              // 副标题样式
            subtextStyle: {
              color: '#666',
              fontSize:'30px',
            },
            // left: '42%',
            // top: '43%',
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            data: arr,
            left:"center",                              
            top:"bottom",                              
            orient:"horizontal",                        
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['50%', '50%'],
               labelLine:{  
                normal:{  
                    length:0
                }  
            }, 
              data:arr,
              animationEasing: 'cubicInOut',
              animationDuration: 2600,
              label: {           
                emphasis: mylabel
              }
            }
          ]
      };
      const myChart3 = echarts.init(document.getElementById("mychart3"));
      myChart3.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart3.resize();
      });
      },
      //外域数量
      initEchartsfour() {
         let arr =[];
         let arrs =[];
        this.platform?.forEach((item) => {
          arrs.push(item.gross);
          arr.push({
            value:item.num,
            name:item.typename
          })

        })
        let arrpop = arrs.toString();
        let arrpops = arrpop.replaceAll(undefined,'');
        let arrpopt = arrpops.replaceAll(',','');
        console.log(arrpopt);
        let mytextStyle = {
          color: "#333",                          
          fontSize: 18,                            
        };
        let mylabel = {
          show: true,                 
          position: "right",          
          offset: [30, 40],             
          formatter: '{b} : {c} ({d}%)',      
          textStyle: mytextStyle
        };
      // 多列柱状图
      const mulColumnZZTData = {
       title: {
            // text: 'Pie Chart',
            // subtext: '纯属虚构',
            x: 'center',
            itemGap: 10,
            y: 'center',
            // text: '总数',
            subtext: arrpopt,
              // 副标题样式
            subtextStyle: {
              color: '#666',
              fontSize:'30px',
            },
            // left: '42%',
            // top: '43%',
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            data: arr,
            left:"center",                              
            top:"bottom",                              
            orient:"horizontal",                        
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['50%', '50%'],
               labelLine:{  
                normal:{  
                    length:0
                }  
            }, 
              data:arr,
              animationEasing: 'cubicInOut',
              animationDuration: 2600,
              label: {           
                emphasis: mylabel
              }
            }
          ]
      };
      const myChart4 = echarts.init(document.getElementById("mychart4"));
      myChart4.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart4.resize();
      });
      },
      //服务
      initEchartsfive() {
          let arr =[];
          let arrs =[];
        this.server?.forEach((item) => {
          arrs.push(item.gross);
          arr.push({
            value:item.num,
            name:item.typename
          })

        })
        let arrpop = arrs.toString();
        let arrpops = arrpop.replaceAll(undefined,'');
        let arrpopt = arrpops.replaceAll(',','');
        console.log(arrpopt);
        let mytextStyle = {
          color: "#333",                          
          fontSize: 18,                            
        };
        let mylabel = {
          show: true,                 
          position: "right",          
          offset: [30, 40],             
          formatter: '{b} : {c} ({d}%)',      
          textStyle: mytextStyle
        };
      // 多列柱状图
      const mulColumnZZTData = {
       title: {
            // text: 'Pie Chart',
            // subtext: '纯属虚构',
            x: 'center',
            itemGap: 10,
            y: 'center',
            // text: '总数',
            subtext: arrpopt,
              // 副标题样式
            subtextStyle: {
              color: '#666',
              fontSize:'30px',
            },
            // left: '42%',
            // top: '43%',
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            data: arr,
            left:"center",                              
            top:"bottom",                              
            orient:"horizontal",     
            // bottom:"45%"                   
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['50%', '50%'],
               labelLine:{  
                normal:{  
                    length:0
                }  
            }, 
              data:arr,
              animationEasing: 'cubicInOut',
              animationDuration: 2600,
              label: {           
                emphasis: mylabel
              }
            }
          ]
      };
      const myChart5 = echarts.init(document.getElementById("mychart5"));
      myChart5.setOption(mulColumnZZTData);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart5.resize();
      });
      },
    }
  }
</script>
<style lang="less" scoped>
.content{
   .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .main{
    height: 360px;
    border-radius: 4px;
    border: 1px solid black;
    // background: #e5e9f2;
     h2{
      padding-top: 20px;
      padding-left: 20px;
    }
    p{
      padding-top: 20px;
      padding-left: 20px;
      // margin-bottom: 1px solid black;
      // border-bottom: 1px solid black;
    }
    .info{
      padding-top: 20px;
      padding-left: 20px;
      // margin-bottom: 1px solid black;
      border-bottom: 1px solid black;
    }
    .button{
      float: right;
    }
  }
  .maintop{
    width: 330px;
    height: 178px;
    // margin-top: 10px;
    margin-left: -18px;
    border: 1px solid black;
    h2{
      padding-top: 5px;
      padding-left: 5px;
    }
    p{
      padding-top: 5px;
      padding-left: 5px;
      // margin-bottom: 1px solid black;
      // border-bottom: 1px solid black;
    }
    .info{
      padding-top: 5px;
      padding-left: 5px;
      // margin-bottom: 1px solid black;
      border-bottom: 1px solid black;
    }
    .button{
      float: right;
    }
  }
  .maintops{
    width: 330px;
    height: 178px;
    margin-top: 5px;
    margin-left: -18px;
    border: 1px solid black;
    h2{
      padding-top: 5px;
      padding-left: 5px;
    }
    p{
      padding-top: 5px;
      padding-left: 5px;
      // margin-bottom: 1px solid black;
      // border-bottom: 1px solid black;
    }
    .info{
      padding-top: 5px;
      padding-left: 5px;
      // margin-bottom: 1px solid black;
      border-bottom: 1px solid black;
    }
    .button{
      float: right;
    }
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .echart{
    margin-top: -45px;
    // padding-left: 40px;
    text-align: center;
    width: 320px;
    height: 178px;
  }
}
.bottom{
    .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    // background: #d3dce6;
    border: 1px solid black;
  }
  .bg-purple-light {
    // background: #e5e9f2;
  }
  .grid-content {
    margin-top: 10px;
    height: 240px;
    border-radius: 4px;
    min-height: 36px;
     p{
      padding-top: 20px;
      padding-left: 20px;
      // margin-bottom: 1px solid black;
      // border-bottom: 1px solid black;
    }
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .echart{
    margin-top: -30px;
    // padding-left: 60px;
    text-align: center;
    width: 400px;
    height: 210px;
  }
}
</style>